<template>
  <el-row>
    <el-col :span="titleMax"  style="box-shadow: 7px 0px 7px -7px #5E5E5E;  height: 725px;" >
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        background-color=""
        text-color=""
        router
      >

          <el-submenu index="1" v-if="isAdmin" >
              <template slot="title" > <i class="el-icon-user"></i>用户管理</template>
              <el-menu-item-group >
                  <el-menu-item index="/2">
                      <i class="el-icon-s-custom"></i>
                      <span slot="title">用户信息</span>
                  </el-menu-item>
                  <el-menu-item index="/8">
                      <i class="el-icon-s-claim"></i>
                      <span slot="title">完善基本信息</span>
                  </el-menu-item>
              </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2"  v-if="isAdmin" >
              <template slot="title"><i class="el-icon-message"></i>会议管理</template>
              <el-menu-item-group>
                  <el-menu-item index="/3">
                      <i class="el-icon-document"></i>
                      <span slot="title">会议信息</span>
                  </el-menu-item>
                  <el-menu-item index="/7">
                      <i class="el-icon-circle-check"></i>
                      <span slot="title">开始会议</span>
                  </el-menu-item>
                  <el-menu-item index="/11">
                      <i class="el-icon-circle-close"></i>
                      <span slot="title">结束会议</span>
                  </el-menu-item>
                  <el-menu-item index="/4">
                      <i class="el-icon-pie-chart"></i>
                      <span slot="title">会议审核</span>
                  </el-menu-item>
              </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3" v-if="isAdmin">
              <template slot="title"><i class="el-icon-info"></i>签到管理</template>
              <el-menu-item-group>
                  <el-menu-item index="/12">
                      <i class="el-icon-s-claim"></i>
                      <span slot="title">补签审核</span>
                  </el-menu-item>
              </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
              <template slot="title"><i class="el-icon-pie-chart"></i>会议统计</template>
              <el-menu-item-group>
                  <el-menu-item index="/5">
                      <i class="el-icon-picture"></i>
                      <span slot="title">图表统计</span>
                  </el-menu-item>
                  <el-menu-item index="/14">
                      <i class="el-icon-pie-chart"></i>
                      <span slot="title">签到卡统计</span>
                  </el-menu-item>
              </el-menu-item-group>
          </el-submenu>

         <el-menu-item index="/1" v-if="!isAdmin" >
              <i class="el-icon-s-custom"></i>
              <span slot="title">会议签到</span>
            </el-menu-item>
          <el-menu-item index="/8" v-if="!isAdmin">
              <i class="el-icon-s-custom"></i>
              <span slot="title">完善基本信息</span>
          </el-menu-item>

          <el-menu-item index="/9" v-if="!isAdmin">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">会议申请</span>
          </el-menu-item>

          <el-menu-item index="/10" v-if="!isAdmin">
              <i class="el-icon-s-order"></i>
              <span slot="title">补签申请</span>
          </el-menu-item>

      </el-menu>
    </el-col>

    <el-container class="padding">
      <el-header  class="padding" style="border-bottom: 1px solid #cccccc;">
           <el-menu
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color=""
              text-color=""
              active-text-color="rgb(9, 137, 250)"
              style="text-align: center">

                <span :class="collapsBtnClass" style="cursor: pointer;float: left;line-height: 56px;padding-left:10px" @click="collapse"></span>
          
                <el-submenu index="1" style="float: right; padding-right: 2.5rem" active-text-color="rgb(9, 137, 250)">
                  <template slot="title"><el-avatar :size="32" src="./favicon.ico"></el-avatar>个人中心</template>
                  <el-menu-item style="text-align: center" index="1-3" @click="tuichu">退出登录</el-menu-item>
                </el-submenu>
      
           </el-menu>

      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-row>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 600px;
}

.padding{
  padding: 0px!important;
 

}

#neiron {
  height: 56px;
  width: 100%;
  background: rgba(116, 116, 114, 0.581);
  font-size: 18px;
}
</style>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      collapsBtnClass: "el-icon-s-fold",
      titleMax: 3.1,
      user:"",
      isAdmin:false
    };
  },
  methods: {
    //点击收缩
    collapse() {
      this.isCollapse = !this.isCollapse;
      //当侧边栏为隐藏时,让其宽度变为0
      if (this.isCollapse) {
        this.titleMax = 1.1;
        this.collapsBtnClass = "el-icon-s-unfold";
      } else {
        this.titleMax = 3.1;
        this.collapsBtnClass = "el-icon-s-fold";
      }
    },
    tuichu(){
        //退出吧浏览器缓存清空
        sessionStorage.clear()
        //退回到登录页面
        this.$router.push("/login");
    },
    handleOpen(key, keyPath) {

    },
    handleClose(key, keyPath) {

    },

    handleSelect(value){

    },
    getUserData(){
      this.user= JSON.parse(sessionStorage.getItem("user"))
      this.user.userIsAdmin ==="是" ?this.isAdmin=true:this.isAdmin=false;
    }
  },
  mounted() {
    this.getUserData()
  }
};
</script>
